import React from "react";
import {
  Link,
  Routes,
  Route,
  // useSearchParams,
  useLocation,
} from "react-router-dom";

const Home = () => {
  return <div>home页面</div>;
};
const About = () => {
  // const [searchParams] = useSearchParams();
  // const obj = {};
  // for (const [key, value] of searchParams.entries()) {
  // console.log(`${key}, ${value}`);
  // obj[key] = value;
  // }
  // console.log(obj);

  const location = useLocation();
  console.log(location);

  return <div>about页面</div>;
};

const App = () => {
  return (
    <>
      <h2>router-v6-query</h2>
      <ul>
        <li>
          <Link to="/home">home</Link>
        </li>
        <li>
          {/* <Link to="/about?a=3&b=4">about</Link> */}
          {/* state需要在to的外面传 */}
          <Link
            to={{
              pathname: "/about",
              search: "?a=3&b=4",
              hash: "#123",
              // state: { aa: 123 },
            }}
            state={{ aa: 123 }}
          >
            about
          </Link>
        </li>
      </ul>

      <hr />

      <Routes>
        <Route path="/home" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
      </Routes>
    </>
  );
};

export default App;
